<template>
  <el-form ref="searchForm" :model="searchForm" label-width="120px">
    <el-row v-if="conditionCount > 0">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="商品类目名称" prop="categoryTitle" label-for="categoryTitle">
          <el-input
            v-model="searchForm.categoryTitle"
            element-id="categoryTitle"
            placeholder="请输入商品类目名称"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="店铺标题" prop="shopTitle" label-for="shopTitle">
          <el-input
            v-model="searchForm.shopTitle"
            element-id="shopTitle"
            placeholder="请输入店铺标题"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="商品标题" prop="goodsTitle" label-for="goodsTitle">
          <el-input
            v-model="searchForm.goodsTitle"
            element-id="goodsTitle"
            placeholder="请输入商品标题"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-button
          type="primary"
          style="margin-left: 10px;"
          :loading="loading.search"
          @click="handleSubmit"
        >搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
        <a v-if="conditionCount > 3" style="margin-left: 10px;" @click="collapse = !collapse">
          <el-button type="text" v-if="!collapse">
            展开
            <svg-icon icon-class="ios-arrow-down" />
          </el-button>
          <el-button v-else type="text">
            收起
            <svg-icon icon-class="ios-arrow-up" />
          </el-button>
        </a>
      </el-col>
    </el-row>
    <el-row v-if="collapse">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="售卖标题" prop="skuTitle" label-for="skuTitle">
          <el-input
            v-model="searchForm.skuTitle"
            element-id="skuTitle"
            placeholder="请输入售卖标题"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="优惠券标题" prop="title" label-for="title">
          <el-input
            v-model="searchForm.title"
            element-id="title"
            placeholder="请输入优惠券标题"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="优惠券使用范围" prop="couponUsableRange">
          <el-select
            v-model="searchForm.couponUsableRange"
            placeholder="请选择优惠券使用范围"
            clearable
            style="width: 100%;"
            @change="handleSubmit"
          >
            <el-option
              v-for="item in selects.couponUsableRangeSelect"
              :value="item.value"
              :key="item.value"
              :label="item.displayValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="优惠券类型" prop="couponType">
          <el-select
            v-model="searchForm.couponType"
            placeholder="请选择优惠券类型"
            clearable
            style="width: 100%;"
            @change="handleSubmit"
          >
            <el-option
              v-for="item in selects.couponTypeSelect"
              :value="item.value"
              :key="item.value"
              :label="item.displayValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="开始时间">
          <el-row>
            <el-col :span="11">
              <el-form-item prop="startTimeMin">
                <el-date-picker
                  type="datetime"
                  v-model="searchForm.startTimeMin"
                  placeholder="请输入开始开始时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%;"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-form-item prop="startTimeMax">
                <el-date-picker
                  type="datetime"
                  v-model="searchForm.startTimeMax"
                  placeholder="请输入结束开始时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%;"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="到期时间">
          <el-row>
            <el-col :span="11">
              <el-form-item prop="dueTimeMin">
                <el-date-picker
                  type="datetime"
                  v-model="searchForm.dueTimeMin"
                  placeholder="请输入开始到期时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%;"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-form-item prop="dueTimeMax">
                <el-date-picker
                  type="datetime"
                  v-model="searchForm.dueTimeMax"
                  placeholder="请输入结束到期时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%;"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
export default {
  name: 'GoodsCouponSearchQuick',
  data() {
    return {
      loading: {
        search: false,
      },
      conditionCount: 9,
      collapse: false,
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        sortColumn: undefined,
        sortOrder: undefined,
        id: undefined,
        idMin: undefined,
        idMax: undefined,
        categoryId: undefined,
        categoryIdMin: undefined,
        categoryIdMax: undefined,
        categoryTitle: undefined,
        categoryIsActive: undefined,
        categoryIsActiveMin: undefined,
        categoryIsActiveMax: undefined,
        shopId: undefined,
        shopIdMin: undefined,
        shopIdMax: undefined,
        shopTitle: undefined,
        shopIsActive: undefined,
        shopIsActiveMin: undefined,
        shopIsActiveMax: undefined,
        goodsId: undefined,
        goodsIdMin: undefined,
        goodsIdMax: undefined,
        goodsTitle: undefined,
        goodsPicUrl: undefined,
        goodsIsActive: undefined,
        goodsIsActiveMin: undefined,
        goodsIsActiveMax: undefined,
        goodsSkuId: undefined,
        goodsSkuIdMin: undefined,
        goodsSkuIdMax: undefined,
        skuTitle: undefined,
        skuPicUrl: undefined,
        skuIsActive: undefined,
        skuIsActiveMin: undefined,
        skuIsActiveMax: undefined,
        title: undefined,
        useMinAmount: undefined,
        useMinAmountMin: undefined,
        useMinAmountMax: undefined,
        discountAmount: undefined,
        discountAmountMin: undefined,
        discountAmountMax: undefined,
        discountPercent: undefined,
        discountPercentMin: undefined,
        discountPercentMax: undefined,
        integralAmount: undefined,
        integralAmountMin: undefined,
        integralAmountMax: undefined,
        totalCount: undefined,
        totalCountMin: undefined,
        totalCountMax: undefined,
        couponUsableRange: undefined,
        couponUsableRangeMin: undefined,
        couponUsableRangeMax: undefined,
        couponType: undefined,
        couponTypeMin: undefined,
        couponTypeMax: undefined,
        startTime: undefined,
        startTimeMin: undefined,
        startTimeMax: undefined,
        dueTime: undefined,
        dueTimeMin: undefined,
        dueTimeMax: undefined,
        validDays: undefined,
        validDaysMin: undefined,
        validDaysMax: undefined,
        version: undefined,
        versionMin: undefined,
        versionMax: undefined,
        createTime: undefined,
        createTimeMin: undefined,
        createTimeMax: undefined,
        updateTime: undefined,
        updateTimeMin: undefined,
        updateTimeMax: undefined,
        isActive: undefined,
        isActiveMin: undefined,
        isActiveMax: undefined,
      },
      dataDictCodes: ['YES_NO', 'COUPON_USABLE_RANGE', 'COUPON_TYPE'],
      selects: {
        categoryIsActiveSelect: [],
        shopIsActiveSelect: [],
        goodsIsActiveSelect: [],
        skuIsActiveSelect: [],
        couponUsableRangeSelect: [],
        couponTypeSelect: [],
        isActiveSelect: [],
      },
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
  },
  methods: {
    initDataDict() {
      utils
        .getDataDict(this.dataDictCodes)
        .then((response) => {
          if (response) {
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'categoryIsActive',
              dataProp: 'categoryIsActiveSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'shopIsActive',
              dataProp: 'shopIsActiveSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'goodsIsActive',
              dataProp: 'goodsIsActiveSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'skuIsActive',
              dataProp: 'skuIsActiveSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'COUPON_USABLE_RANGE',
              formProp: 'couponUsableRange',
              dataProp: 'couponUsableRangeSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'COUPON_TYPE',
              formProp: 'couponType',
              dataProp: 'couponTypeSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'isActive',
              dataProp: 'isActiveSelect',
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    resetForm(excludeProps) {
      for (let key in this.searchForm) {
        if (excludeProps && excludeProps.includes(key)) {
          continue
        }
        this.searchForm[key] = undefined
      }
    },
    handleSubmit() {
      this.$emit('quickSearch')
    },
    handleReset() {
      this.$emit('researchTable')
    },
  },
}
</script>
<style>
.ivu-quick-opt {
  text-align: right;
}
</style>